<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="statics/images/1.ico">
	<link rel="stylesheet" type="text/css " href="statics/css/re.css">
	<style type="text/css">
		header,footer,section,aside,article,nav,hgroup,figure,figcaption,details,summary{
			display: block;
			margin: 0;
			padding: 0;
			border: none;
		}
		time,mark,rt,rp,output,keygen,meter,progress,source{
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
		}
		body,h1,h2,h3,h4,h5,h6,ul,ol,li,form,p,dl,dt,dd,table,th,td,img,blockquote{
			margin: 0;
			padding: 0;
			border: 0;
		}

	</style>
</head>
<body>
	<header class="header">
		<div class="bg"></div>
		<div class="links">
			<a href="#">了解更多 | <a href="#">反馈意见</a>
		</div>
	</header>
       <section class="content">
       	<header class="content-tit">
       		<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品</h1>
       	</header>
       	<div class="mainBody-wp">
       		<div class="mainBody">
       			<div class="regTabs">
       				<ul>
       					<li><a href="#" style="font-weight: bold;color: #fff;">注册字母邮箱</a></li>
       					<li><a href="#">注册手机号码邮箱</a></li>
       					<li><a href="#">注册VIP邮箱</a></li>

       				</ul>
       			</div>
                   <div class="regForm">
                   	<dl class="regForm-item">
                   		<dt class="regForm-title">
                   			<span class="txt-impt">* </span>邮件地址
                   		</dt>
                   		<dd class="regForm-ct">
                   			<input type="text"  style="width: 200px;" class="ipt">
                                    <strong style="font-weight: bold;font-size: 14px;">@</strong>
                                    <select>
                                    <option selected="selected">163.com</option></select>
                   			<div class="tip">
                                        <span>6~18个字符，可使用字母、下划线，需以字母开头</span>              
                                    </div>
                   		</dd>
                   	</dl>
                       <dl class="regForm-item">
                              <dt class="regForm-title">
                                    <span class="txt-impt">* </span>密码
                              </dt>
                              <dd class="regForm-ct">
                                    <input type="text" class="ipt">
                                    <div class="tip">
                                        <span>6~16个字符，区分大小写</span>              
                                    </div>
                              </dd>
                        </dl>

                        <dl class="regForm-item">
                              <dt class="regForm-title">
                                    <span class="txt-impt">* </span>确认密码
                              </dt>
                              <dd class="regForm-ct">
                                    <input type="text" class="ipt">
                                    <div class="tip">
                                        <span>请再次填写密码</span>              
                                    </div>
                              </dd>
                        </dl>

                        <dl class="regForm-item">
                              <dt class="regForm-title">
                                    <span class="txt-impt">* </span>手机号码
                              </dt>
                              <dd class="regForm-ct">
                                    <input type="text" value="+86" class="ipt" id="phone">

                                     <!-- <div class="itlSelect">
                                           <a href="#" class="flag-CN"><em></em>中国 +86</a>
                                           <a href="#" class="flag-AL"><em></em>阿尔巴尼亚（Shqiperia) +355</a>
                                           <a href="#" class="flag-NL"><em></em>荷兰(Nederland) +31</a>
                                           <a href="#" class="flag-DK"><em></em>丹麦（Danmark) +45</a>
                                           <a href="#" class="flag-FJ"><em></em>斐济（Fiji) +679</a>
                                     </div> -->

                                    <div class="itl">
                                          <div class="itl-flag">
                                                <em></em>
                                          </div>
                                    </div>

                                    <div class="tip">
                                        <span>忘记密码时，可以通过手机号码快速找回密码</span>              
                                    </div>
                              </dd>
                        </dl>

                        <dl class="regForm-item">
                              <dt class="regForm-title" style="margin-top: 15px;">
                                    <span class="txt-impt">* </span>验证码
                              </dt>
                              <dd class="regForm-ct">
                                    <input type="text" class="ipt"  style="width: 200px;margin-top: 15px;">
                                    <div class="tip"> 
                                      
                                        <span>请填写图片中的字符，不区分大小写</span>              
                                    </div>
                                    <div class="vCode"><img src="statics/images/3 (1).jpg"> <br/>
                                          <a href="#" style="font: 14px;margin-top:0px;">看不清楚？换张图片</a>
                                    </div>
                                   
                                          
                                    
                              </dd>
                        </dl>

                        <dl class="regForm-item">
                              <button class="btn">
                                    <strong>免费获取验证码</strong>
                              </button>
                        </dl>

                        <dl class="regForm-item" style="margin-top: 20px;">
                              <dt class="regForm-title">
                                    <span class="txt-impt">* </span>短信验证码
                              </dt>
                              <dd class="regForm-ct">
                                    <input type="text" class="ipt">
                                    <div class="tip">
                                        <span>请查收手机短信，并填写短信中的验证码</span>              
                                    </div>
                              </dd>
                        </dl>

                        <dl class="regForm-item" style="margin-left: 105px;">
                              <input type="checkbox" checked="checked"> 同意 <a href="#">"服务条款"</a>和 <a href="#">"隐私权相关政策"</a>
                        </dl>

                        <dl class="regForm-item">
                              <button class="btn2">
                                    <strong>免费注册</strong>
                              </button>
                        </dl>
                         



                   </div>

       		</div>
       		<aside class="mainBody-side">
       			<div class="regExt">
       				<img src="statics/images/2.gif">
       			</div>
       		</aside>
       	</div>
       </section>




       <script type="text/javascript">
            function itlSelect(){
                  /*1、找到下拉框里面的<a>标签*/
             var links=document.querySelectorAll('.itlSelect');
             // console.log(links);
              /*2、给找到的A标签绑定点击事件*/
              for (var i = 0; i < links.length; i++) {
                    links[i].addEventListener('click',function(e){
                        var a =e.target;
                         /*获取a标签中的文本内容*/
                        var txt=a.innerText;
                        /*获取a标签的class类名*/
                        var cls=a.className;

                        // console.log(txt +"--" +cls);
                        /*获取+号在文本里面的位置*/

                        /*截取字符串，获取“地区编码值*/
                        var area=txt.substr(txt.indexOf('+'),txt.length - txt.indexOf('+'));
                        /* 设置输入框的地区编码*/
                        document.querySelector('#phone').setAttribute('value',area);

                        /*设置input输入的国旗标志*/
                        var p=document.querySelector('.itl-flag');
                        p.className=' itl-flag '+cls;
                    })
              }
               }
               itlSelect();
               
       </script>

</body>
</html>